
body{
  padding:0px;
  margin:0px;
  background:hsl(212,50%,50%);
}



.sun {
  width:40px;
  height:40px;
  border-radius:360px;
  background:white;
  right:40px;
  top:-120px;
  position:absolute;
  	animation-name: sunrise;
	  animation-duration: 1s;
	  animation-timing-function: ease;
	  animation-iteration-count: 1;	
	  animation-direction: normal;
	  animation-delay: .1;
	  animation-play-state: running;
	  animation-fill-mode: forwards;
}

@keyframes sunrise {

	0% {
		  top: -120px;
	}
  
25% {
  top:19px;
  right: 40px;
	}
 
50% {
  top:25px;
  right: 40px;
	}

100% {
  top:18px;
  right: 40px;
	}

}


.wmd1{
   -webkit-transform: scale(.6);
  position:absolute;
  top:10px;
  left:200px;
  perspective: 1000px;
}

.base{ }



.blades{
  width: 350px;
  height: 350px;
  left: 10%;
  top: 10%;
  z-index:2;
  border-radius: 50%;
  position: absolute;
  margin-top: -30px;
  margin-left: 50px;
  
  animation: spin 6s linear infinite;
}



.blade1 {
  		background: white;
  position:absolute;
	  width:41px;
	  height:139px;
  top:-10px;
  left:150.5px;
  transform:rotate(0deg);
  display:inline-block;
  background:
    linear-gradient(135deg, transparent 20px, white 0),
    linear-gradient(225deg, transparent 20px, white 0),
    linear-gradient(315deg, transparent 20px, white 0),
    linear-gradient(45deg, transparent  20px,  white 0);
  background-position: top left, top right, bottom right, bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}



.blade2 {
  		background:white;
  position:absolute;
	  width:41px;
	  height:139px;
  top:105.5px;
  left:41px;
  transform:rotate(-90deg);
  display:inline-block;
  background:
    linear-gradient(135deg, transparent 20px, white 0),
    linear-gradient(225deg, transparent 20px, white 0),
    linear-gradient(315deg, transparent 20px, white 0),
    linear-gradient(45deg, transparent  20px,  white 0);
  background-position: top left, top right, bottom right, bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}

.blade3 {
  		background:white;
  position:absolute;
	  width:41px;
	  height:139px;
  top:105.5px;
  right:41px;
  transform:rotate(-270deg);
  display:inline-block;
  background:
    linear-gradient(135deg, transparent 20px, white 0),
    linear-gradient(225deg, transparent 20px, white 0),
    linear-gradient(315deg, transparent 20px, white 0),
    linear-gradient(45deg, transparent  20px,  white 0);
  background-position: top left, top right, bottom right, bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}

.blade4 {
  		background:white;
  position:absolute;
	  width:41px;
	  height:139px;
  bottom:-10px;
  left:150.5px;
  transform:rotate(180deg);
  display:inline-block;
  background:
    linear-gradient(135deg, transparent 20px, white 0),
    linear-gradient(225deg, transparent 20px, white 0),
    linear-gradient(315deg, transparent 20px, white 0),
    linear-gradient(45deg, transparent  20px,  white 0);
  background-position: top left, top right, bottom right, bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}

.vane1{
  width:1px;
  height:350px;
  left:175px;
  background:white;
  position:absolute;
  transform:rotate(90deg);
}

.vane2{
  width:1px;
  height:350px;
  left:171.5px;
  background:white;
  position:absolute;
  transform:rotate(180deg);
}

.base .bottom_base{
  position:absolute;
  width:90px;
  height:100px;
  left:162px;
  border-right: 16px solid transparent;
  border-left: 16px solid transparent;
  border-bottom: 380px solid white;
  opacity:.8;
  z-index:-1;
  top:42.5px;
}

ul{
  position:absolute;
  top:180px;
  left:-30px;
}
li{
  width:10px;
  height:10px;
  background:white;
  padding:2px;
  display:block;
  margin: 30px;
  box-shadow: inset 0px -2px 0px lightgray; 
}

li:nth-child(2){
  position:absolute;
  top:-45px;
  left:20px;
}

li:nth-child(1){
  position:absolute;
  top:35px;
  left:50px;
}

li:nth-child(3){
  position:absolute;
  top:75px;
  left:50px;
}


@keyframes spin {
0% {
   	transform:rotate(0deg);
 }
 100% {
   	transform:rotate(-360deg);
 }
}
